<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="showList" class="content">
    <van-popup v-model="showRevoke" closeable position="bottom" :style="{ height: '30%' }">
      <van-form @submit="handleRevoke">
        <van-field v-model="revokeReason" name="revokeReason" label="撤销原因" required placeholder="请输入撤销原因"
          :rules="[{ required: true}]" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
      <div class=" list">
        <div class="list-item" v-for="item in list" :key="item.id">
          <div class="list-item-top">
            <span class="room">{{ item.room }}</span>
            <span class="pendingApproved" v-if="item.auditStatus === '0'">待审核</span>
            <span class="approved" v-if="item.auditStatus === '1'">审核同意</span>
            <span class="noApproved" v-if="item.auditStatus === '2'">审核驳回</span>
          </div>
          <div class="list-item-middle">
            <div><span class="label">发起人：</span><span class="value">{{ item.userName }}</span></div>
            <div><span class="label">会议主题：</span><span class="value">{{ item.meetTitle }}</span></div>
            <div><span class="label">会议时间：</span><span class="value">{{ item.orderStartTime.slice(0, 16) }} - {{
                item.orderEndTime.slice(11, 16) }}</span></div>
            <van-image :src="require('@/assets/images/subscribeList/read.png')" alt="" width="80px"
              v-if="item.readStatus == '1'" class="read-icon" />
            <van-image :src="require('@/assets/images/subscribeList/unread.png')" alt="" width="80px" v-else
              class="read-icon" />
          </div>
          <div class="list-item-bottom">
            <div class="list-item-bottom-item">
              <van-image :src="require('@/assets/images/subscribeList/detail.png')" alt="" width="16px" />
              <span class="value" @click="handleGoDtail(item.meetId)">详情</span>
            </div>
            <template v-if="Type == '1' ">
              <div class="list-item-bottom-item" @click="handleAudit('2', item,'退回')">
                <van-image :src="require('@/assets/images/subscribeList/refuse.png')" alt="" width="16px" />
                <span class="value">退回</span>
              </div>
              <div class="list-item-bottom-item" @click="handleAudit('1', item,'同意')">
                <van-image :src="require('@/assets/images/subscribeList/agree.png')" alt="" width="15px" />
                <span class="value">同意</span>
              </div>
            </template>

            <div class="list-item-bottom-item" @click="handleOpenRevoke(item)"  v-if="['2', '3'].includes(Type)">
              <van-image :src="require('@/assets/images/subscribeList/revoke.png')" alt="" width="16px" />
              <span class="value">撤销</span>
            </div>
            <di class="list-item-bottom-item" @click="handleAudit('1', item)" v-if="Type == '2'">
              <van-image :src="require('@/assets/images/subscribeList/export.png')" alt="" width="15px" />
              <span class="value">导出签到</span>
            </di>
          </div>
        </div>
      </div>
    </van-list>

    <van-empty description="暂无数据" v-if="!list.length" />
  </van-pull-refresh>

</template>

<script>
export default {
  props: {
    Type: {
      Type: String,
      default: '1'
    },
    show: {
      Type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showRevoke: false,
      revokeReason:"",
      meetId: "",
      finishedText:"",
      page: 1,
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      type: this.Type,
      showList: this.show,
      list: [],
      pageNum:1
    }
  },
  watch: {
    show: {
      handler(val) {
        this.showList = val
      }
    }
  },
  // mounted() {
  //   this.onLoad()
  // },
  methods: {
    // 获取列表数据
    onLoad() {
      this.$axios({
        url: `/meetingOrderPerson/myOrders?column=createTime&order=desc&pageNo=${this.pageNum}&pageSize=20&type=${this.type}`,
        method: 'get',
      }).then((res) => {
        this.pageNum = res.current + 1;
        this.finishedText = res.current > 1 ?'没有更多':''
        this.list = [...this.list, ...res.records];
        if (this.list.length === res.total) {
          this.finished = true
          if (this.list.length) {
            this.finishedText = "没有更多了"
          }
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    handleGoDtail(meetId) { 
      this.$router.push({
        path: '/subscribeList/detail',
        query: {
          meetId: meetId,
          active: this.type
        }
      })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 退回 | 同意
    handleAudit(audit, item,text) {
      this.$dialog.confirm({ title: "提示", message: `是否确认${text}` }).then((res) => {
        res && this.$axios({
          url: `/meetingOrderPerson/meetBack?audit=${audit}&meetId=${item.meetId}`,
          method: 'post',
        }).then((res) => {
          this.$toast.success(res.message || '操作成功');
        }); 
      })
    },
    handleOpenRevoke(item) {
      this.showRevoke = true
      this.meetId = item.meetId
    },
    handleRevoke(item) {
      this.$dialog.confirm({ title: "提示", message: `是否确认撤销` }).then((res) => {
        res && this.$axios({
          url: `/meetingOrderPerson/readMeetInfo?reason=${this.revokeReason || ""}&meetId=${item.meetId}`
        }).then((res) => {
          this.$toast.success(res.message || '操作成功');
          this.showRevoke = false;
          this.meetId = "";
        })
      })
     }
  }
}
</script>
<style scoped lang="less">
.content{
  height: calc(100% - 101px);
  padding: 0 15px 15px;
  .list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 10px 0 40px;
  
      .list-item {
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
  
        .list-item-top {
          display: flex;
          justify-content: space-between;
  
          .room {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #0B0B0B;
            text-align: left;
            font-style: normal;
          }
  
          .pendingApproved {
            color: #F07106;
          }
  
          .approved {
            color: #29AA17
          }
  
          .noApproved {
            color: red
          }
        }
  
        .list-item-middle {
          position: relative;
          display: flex;
          flex-direction: column;
          border-top: 1px solid#ECECEC;
          border-bottom: 1px solid#ECECEC;
          margin: 10px 0;
  
          .label {
            display: inline-block;
            color: #727B9C;
            width: 81px;
          }
  
          .value {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #01124D;
            line-height: 40px;
            text-align: left;
            font-style: normal;
  
          }
  
          .read-icon {
            position: absolute;
            right: 0;
            bottom: 40px;
          }
        }
  
        .list-item-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .list-item-bottom-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
          }
        }
      }
    }
}

</style>